<template>
  <div id="modelSettingList">
    <div v-if="noModel()">
      <el-empty description="No Model Selected"></el-empty>
    </div>
    <div v-else>
      <el-tabs :key="updateKey">
        <el-tab-pane v-for="model in modelList" v-bind:key="model" :label="model">
          <ModelSetting :model="model"/>
        </el-tab-pane>
      </el-tabs>

      <el-row type="flex" justify="end">
        <el-col :span="4">
          <el-button type="primary" v-on:click="globalSetting">Global</el-button>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" v-on:click="modelSettingListSubmit">Submit</el-button>
        </el-col>
      </el-row>
    </div>

    <el-dialog
        :key="dialogUpdateKey"
        title="Global settings"
        :visible.sync="dialogVisible"
        width="800px"
        :before-close="handleClose">

      <el-tabs>
        <el-tab-pane v-for="vModel in vModelList" v-bind:key="vModel.name" :label="vModel.name">
          <VModelSettingList :vModel="vModel"></VModelSettingList>
        </el-tab-pane>
      </el-tabs>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="setGlobalSetting">Confirm</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ModelSetting from '@/components/modelSetting'
import VModelSettingList from "@/components/vModelSettingList";
import {mapState} from "vuex";

export default {
  name: "ModelSettingList",
  components: {
    ModelSetting,
    VModelSettingList
  },
  data() {
    return {
      dialogVisible: false,
      globalCheckList: {},
      updateKey: 0,
      dialogUpdateKey: 0,
    }
  },
  beforeCreate() {
    for (let vModel of this.$store.state.model.virtualModelList) {
      this.globalCheckList[vModel.name] = []
    }
  },
  methods: {
    handleClose(done) {
      done();
    },
    globalSetting: function () {
      this.dialogUpdateKey += 1
      this.dialogVisible = true
    },
    setGlobalSetting: function () {
      this.$store.dispatch('syncVirtualSettingToReal')
      this.dialogVisible = false
      this.updateKey += 1
    },
    modelSettingListSubmit: function () {

      let modelNameList = []
      let warningModels = []
      for (let model of Object.keys(this.$store.state.model.modelSettingList)) {
        if (this.$store.state.model.modelSettingList[model].is_virtual === '1') {
          continue
        }
        let isRunning = false
        for (let m of this.$store.state.model.modelStateList) {
          if (m.name === model && m.state === this.$store.state.model.modelState.running.id) {
            isRunning = true
          }
        }
        if (isRunning === false) {
          modelNameList.push(model)
        } else {
          warningModels.push(model)
        }
      }

      this.$store.commit(
          "initModelStateList",
          {
            'modelList': modelNameList,
            'initState': this.$store.state.model.modelState.pending.id
          }
      )
      this.$store.dispatch('remoteStartReleasing', modelNameList)

      if (warningModels.length !== 0) {
        let message = warningModels.toString() + ' already running'
        this.$message({
          message: message,
          type: 'warning'
        });
      }
    },
    noModel: function () {
      return this.modelList.length === 0
    },
  },
  computed: {
    ...mapState({
      modelList: state => state.model.selectedModelList,
      vModelList: state => state.model.virtualModelList,
    }),
  },
}
</script>

<style scoped>
#modelSettingList {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background: white;
}
</style>